<!--经济运行-->
<template>
    <div class="rightView">
        <transition name="animationRL">
            <div v-show="shows" style="display: flex; flex-direction: row">
                <div style="display: flex; flex-direction: column">
                    <div class="container2">
                        <div class="container_title3">
                            <span>经济运行分析</span>
                        </div>
                        <div class="container_table">
                            <div class="container_table_header">
                                <div>产业名称</div>
                                <div>工业总产值</div>
                                <div>工业利润</div>
                                <div>工业企业数</div>
                                <div>工业规上数</div>
                                <div>上市企业数</div>
                            </div>
                            <div class="container_table_subject userFlex" ref="profit" @mouseenter="stopAutoScroll"
                                 @mouseleave="startAutoScroll">
                                <div
                                        class="container_table_subject_line"
                                        v-for="(item, i) in tableList"
                                        :key="i"
                                >
                                    <div>{{ item.industryTypeName }}</div>
                                    <div>{{ item.grossIndustrialOutputValue }}</div>
                                    <div>{{ item.profit }}</div>
                                    <div>{{ item.count }}</div>
                                    <div>{{ item.aboveDesignatedSizeCount }}</div>
                                    <div>{{ item.onMarketCount }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container2">
                        <div class="container_title3">
                            <span>生产运行</span>
                        </div>
                        <div class="container_table">
                            <div class="container_table_header2">
                                <div>企业名称</div>
                                <div>工业总产值</div>
                                <div>税金</div>
                                <div>利润</div>
                                <div>月工资总额</div>
                                <div>应收账款</div>
                            </div>
                            <div class="container_table_subject userFlex" ref="tableContainer"
                                 @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                                <div
                                        class="container_table_subject_line"
                                        v-for="(item, i) in tableList2"
                                        :key="i"
                                >
                                    <div>{{ item.name }}</div>
                                    <div>{{ item.grossIndustrialOutputValue }}</div>
                                    <div>{{ item.taxex }}</div>
                                    <div>{{ item.profit }}</div>
                                    <div>{{ item.totalWages === null ? 0.00 : item.totalWages }}</div>
                                    <div>{{ item.accountsReceivable === null ? 0.00 : item.accountsReceivable }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="display: flex; flex-direction: column">
                    <div class="container">
                        <div class="container_title4">
                            <span>工业产值</span>
                        </div>
                        <div class="container-garden">
                            <div class="container-garden-pie" ref="outputChart"></div>
                            <div class="container-garden-totality">
                                <div class="container-garden-totality-barBox">
                                    <div style="display: flex;align-items: center;">
                                        <span>本期</span>
                                        <span>{{ isNaN(currentData) ? 0 : currentData }}%</span>
                                    </div>
                                </div>
                                <div class="container-garden-totality-barBox">
                                    <div style="display: flex;align-items: center">
                                        <span>上期</span>
                                        <span>{{ isNaN(previousData) ? 0 : previousData }}%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container-legend">
                            <div style="display: flex;align-items: center;">
                                <div class="container-legend-quadrate" style="background-color: #ff832e"></div>
                                <div class="container-legend-textFont">本期<span>{{ outputData.cur }}</span>万元</div>
                            </div>
                            <div style="display: flex;align-items: center;">
                                <div class="container-legend-quadrate" style="background: #02e3fc"></div>
                                <div class="container-legend-textFont">上期<span>{{ outputData.prev }}</span>万元</div>
                            </div>
                        </div>
                        <!--                        <div class="container_barBox" ref="outputChart"></div>-->
                    </div>
                    <div class="container">
                        <div class="container_title4">
                            <span>园区税收</span>
                        </div>
                        <div class="container_barBox" ref="revenueChart"></div>
                    </div>
                    <div class="container">
                        <div class="container_title4">
                            <span>企业经营</span>
                        </div>
                        <div class="container_barBox" ref="manageChart"></div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows = !shows"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getAnalysis, getManagement, getOperation, getTex, getValue} from "@/api/economy/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            shows: true,
            scrollSpeed: 60, // 调整滚动速度，数值越小滚动越快
            scrollInterval: null,
            outputData: [],
            currentData: [],  // 本期百分比
            previousData: [],  // 上期百分比
            tableList: [],
            tableList2: [
                {
                    name: "海川能源",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "新矿内蒙古能源",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "恒坤化工",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "义川业碳材",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "宏利达煤焦精细化工",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "上海庙鄂西物流",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "海川能源",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "鑫祥能源再生",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "雅海能源开发",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
                {
                    name: "森泰天然气",
                    output: "12",
                    profit: "8",
                    firm: "4",
                    up: "4",
                    market: "4",
                },
            ],
        };
    },
    mounted() {
        //园区税收
        this.getTex();
        //工业产值
        this.getValue();
        //经济运行分析
        this.getAnalysis()
        //成产运行
        this.getOperation()
        //企业经营
        this.getManagement()
        this.startAutoScroll();
    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    methods: {
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const profit = this.$refs.profit;
            const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
                profit.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        //经济运行分析
        getAnalysis() {
            let _this = this
            getAnalysis().then((res) => {
                _this.tableList = res.data
                console.log(res, "经济运行分析")
            })
        },
        //成产运行
        getOperation() {
            let _this = this
            getOperation().then((res) => {
                _this.tableList2 = res.data.list
                console.log(res, "成产运行")
            })
        },
        //企业经营
        getManagement() {
            let _this = this
            let params = 2023
            getManagement(params).then((res) => {
                _this.initManage(res.data)
                // console.log(res.data,"企业经营")
            })
        },
        //园区税收
        getTex() {
            let _this = this
            getTex().then((res) => {
                _this.initRevenue(res.data)
                // console.log(res.data,"企业经营")
            })
        },
        //工业产值
        getValue() {
            let _this = this
            getValue().then((res) => {
                _this.outputData = res.data
                _this.initOutput(res.data)
                // console.log(res.data,"企业经营")
                const curNumeric = parseFloat(res.data.cur.replace(',', ''));
                const prevNumeric = parseFloat(res.data.prev.replace(',', ''));
                const totalSum = curNumeric + prevNumeric;
                _this.currentData = (parseFloat(res.data.cur.replace(',', '')) / totalSum * 100).toFixed(2);
                _this.previousData = (parseFloat(res.data.prev.replace(',', '')) / totalSum * 100).toFixed(2);
                console.log(totalSum, "企业经营22")
            })
        },
        //园区税收
        initRevenue(data) {
            const myEchart = echarts.init(this.$refs.revenueChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let xData = data.period
            let totalTex = data.totalTex  // 税收总额
            let addedTex = data.addedTex   // 企业所得税
            let incomeTex = data.incomeTex   // 增值税
            const mergedArray = data.totalTex.concat(data.addedTex, data.incomeTex);
            console.log(data, "园区税收")
            option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ["税收总额", "企业所得税", "增值税"],
                    align: "left",
                    right: "20",
                    y: 15,
                    textStyle: {
                        fontSize: 10,
                        color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    // itemGap: 10
                },
                grid: {
                    left: "1%",
                    right: "4%",
                    bottom: "1%",
                    top: "20%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.60)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        // min: 0,
                        // max: maxValue,
                        name: '万元',
                        nameTextStyle: {
                            padding: [0, 0, 0, -45], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        axisLabel: {
                            formatter: "{value} ",
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.60)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "税收总额",
                        type: "bar",
                        data: totalTex,
                        barWidth: 7, //柱子宽度
                        barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 230, 255, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 230, 255, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                    {
                        name: "企业所得税",
                        type: "bar",
                        data: addedTex,
                        barWidth: 7,
                        barGap: 1,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(255, 131, 46, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255, 131, 46, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                    {
                        name: "增值税",
                        type: "bar",
                        data: incomeTex,
                        barWidth: 7,
                        barGap: 1,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(255, 131, 46, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255, 131, 46, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                ],
            };
            myEchart.setOption(option);
        },
        //企业经营
        initManage(data) {
            const myEchart = echarts.init(this.$refs.manageChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            let xData = data.month
            let output = data.output
            let taxex = data.taxex
            //合并数组
            const mergedArray = data.output.concat(data.taxex);
            //求最大值
            const maxValue = Math.max(...mergedArray);
            console.log(data, "企业经营")
            option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    data: ["企业所得税", "增值税"],
                    align: "left",
                    right: "20",
                    y: 15,
                    textStyle: {
                        fontSize: 10,
                        color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    // itemGap: 10
                },
                grid: {
                    left: "1%",
                    right: "4%",
                    bottom: "1%",
                    top: "20%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.60)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: '万元',
                        nameTextStyle: {
                            padding: [0, 0, 0, -45], // 上右下左
                            color: "rgba(255, 255, 255, 0.80)"
                        },
                        max: maxValue,
                        axisLabel: {
                            formatter: "{value} ",
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.60)",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "企业所得税",
                        type: "bar",
                        data: output,
                        barWidth: 5, //柱子宽度
                        barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 230, 255, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 230, 255, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                    {
                        name: "增值税",
                        type: "bar",
                        data: taxex,
                        barWidth: 5,
                        barGap: 1,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(255, 131, 46, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255, 131, 46, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                ],
            };
            myEchart.setOption(option);
        },
        //工业产值
        initOutput(data) {
            const myEchart = echarts.init(this.$refs.outputChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            console.log(data,'data工业产值')
            let datas = [
                {
                    value: parseFloat(data.cur.replace(',', '')),
                    name: "本期",
                },
                {
                    value: parseFloat(data.prev.replace(',', '')),
                    name: "上期",
                },
            ]
            console.log(datas, "工业产值111")
            option = {
                tooltip: {
                    trigger: "item",
                    position: ['30%', '40%'],
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                series: [
                    {
                        name: "工业产值",
                        type: "pie",
                        radius: ["75%", "85%"],
                        color: ["#FF832E", "#62B7FF"],
                        labelLine: {
                            normal: {
                                show: false,
                                length: 20,
                                length2: 20,
                                lineStyle: {
                                    width: 2,
                                },
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                formatter: "{c|{c}}\n{hr|}\n{d|{b}}",
                                rich: {
                                    b: {
                                        fontSize: 10,
                                        color: "#12EABE",
                                        align: "left",
                                        padding: 4,
                                    },
                                    d: {
                                        fontSize: 12,
                                        color: "#fff",
                                        align: "left",
                                        padding: 4,
                                    },
                                    c: {
                                        fontSize: 16,
                                        color: "#fff",
                                        align: "left",
                                        padding: 4,
                                    },
                                },
                            },
                        },
                        data: datas,
                    },
                ],
            };
            myEchart.setOption(option);
        },
    },
};
</script>

<style lang="scss">
.height200 {
  width: 570px;
  height: 200px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189dc5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.statistical-scrollbar {
  width: 220px;
  height: 130px;
  display: flex;
  flex-direction: column;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189dc5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.camera {
  .el-dropdown .el-button-group {
    height: 28px;
    width: 150px;

    .el-button--primary {
      background: rgba(98, 183, 255, 0.2);
      box-shadow: inset 0px 0px 12px 0px #62b7ff;
      border: 1px solid #62b7ff;
    }
  }

  &-ulBox2 {
    width: 105px;
    height: 50px;
    background: #082048;
    box-shadow: inset 0px 0px 12px 0px #62b7ff;
    border: 1px solid #62b7ff;
  }
}

.container2 {
  .el-dropdown .el-button-group {
    .el-button--primary {
      background: rgba(98, 183, 255, 0.2);
      box-shadow: inset 0px 0px 12px 0px #62b7ff;
      border: 1px solid #62b7ff;
    }
  }

  &-ulBox {
    width: 190px;
    height: 50px;
    background: #082048;
    box-shadow: inset 0px 0px 12px 0px #62b7ff;
    border: 1px solid #62b7ff;
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k * $pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8 * 2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k * $pixel/$height;
  }
  .container {
    height: calHeight_2k(28px);

    &-ulBox2 {
      height: calHeight_2k(50px);
    }
  }

  .height200 {
    height: calHeight_2k(200px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }

  .statistical-scrollbar {
    height: calHeight_2k(130px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.marginL21 {
  margin-left: 21px;
}

.marginL13 {
  margin-left: 6px;
}

.rightView {
  float: right;
  margin-top: 20px;
  display: flex;
  height: 630px;
  flex-direction: row;
  align-items: center;
  cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    width: 280px;
    height: 200px;
    padding-left: 16px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_3_4.png");
    flex-direction: column;

    &-garden {
      width: 253px;
      height: 100px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-pie {
        width: 100px;
        height: 100px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_pie.png");
      }

      &-totality {
        width: 120px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &-barBox {
          width: 120px;
          height: 21px;
          display: flex;
          flex-direction: column;
          align-items: center;
          background-size: 100% 100%;
          background-image: url("@/assets/bgc_pie1.png");

          span:nth-child(1) {
            font-size: 12px;
            font-family: Noto Sans SC-Regular, Noto Sans SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
          }

          span:nth-child(2) {
            font-size: 16px;
            font-family: D-DIN-DIN-Bold, D-DIN-DIN;
            font-weight: bold;
            line-height: 22px;
            background: linear-gradient(180deg, #ffffff 19%, #00e6ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-left: 4px;
          }
        }
      }
    }

    &-legend {
      width: 253px;
      height: 15px;
      margin-left: 60px;
      margin-top: 20px;

      //display: flex;
      //justify-content: space-between;
      //align-items: center;

      &-quadrate {
        width: 8px;
        height: 8px;
          margin-top: 4px;
      }

      &-textFont {
        font-size: 14px;
        font-family: Noto Sans SC-Regular, Noto Sans SC;
        font-weight: 400;
        color: #ffffff;
        margin: 5px 5px;
          span{
              font-size: 16px;
              font-weight: bold;
              background: linear-gradient(180deg, #ffffff 19%, #23a5f7 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
          }
      }

      &-numFont {
        font-size: 19px;
        font-family: D-DIN-DIN-Bold, D-DIN-DIN;
        font-weight: bold;
        line-height: 22px;
        background: linear-gradient(180deg, #ffffff 19%, #23a5f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_barBox {
      width: 260px;
      height: 155px;
    }

    &-camera {
      width: 260px;

      &_firm {
        width: 260px;
        height: 180px;
        margin-top: 10px;
        position: relative;

        &_fontColor {
          font-size: 14px;
          font-family: Noto Sans SC-Medium, Noto Sans SC;
          font-weight: 500;
          color: #00e6ff;
        }

        &_imgBox {
          width: 100%;
          height: 90px;
          margin-top: 8px;
          background-size: 100% 100%;
          background-image: url("@/assets/bg_pt.png");
        }
      }
    }

    &_table {
      width: 410px;
      height: 154px;
      margin-top: 15px;
      font-size: 12px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      margin-left: 5px;

      &_header {
        width: 100%;
        height: 26px;
        background: rgba(98, 183, 255, 0.2);
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 26px;

        div {
          width: 16%;
        }
      }

      &_header2 {
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding: 0 2px;
        background: rgba(98, 183, 255, 0.2);
        display: flex;
        justify-content: space-between;
        text-align: center;

        div {
          width: 16%;
        }
      }

      &_subject {
        width: 100%;
        height: 180px;
        font-size: 12px;

        &_line {
          width: 100%;
          height: 23px;
          margin-top: 5px;
          //margin-bottom: 8px;
          line-height: 23px;
          display: flex;
          justify-content: space-between;
          text-align: center;


          div {
            width: 16%;
            overflow: hidden;
          }
        }
      }
    }

    &-titleBgc {
      width: 260px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &-titleBgc2 {
      width: 410px;
      height: 3px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_title3 {
      width: 410px;
      height: 24px;
      margin-top: 20px;
      margin-left: 5px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-left: 11px;
        background: linear-gradient(0deg, #90ccff 0%, #fafafb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_title4 {
      width: 260px;
      height: 24px;
      margin-top: 15px;
      //margin-left: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 24px;
        margin-left: 11px;
        background: linear-gradient(0deg, #90ccff 0%, #fafafb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_intention {
      width: 238px;
      position: relative;
      height: 161px;

      &_line {
        width: 100%;
        height: 1px;
        background: #eeebe9;
        opacity: 0.4;
      }

      &_bg {
        position: absolute;
        width: 238px;
        height: 161px;
        background: #19508e;
        opacity: 0.36;
      }

      &_title {
        text-align: center;
        width: 25%;
        height: 18px;
        line-height: 18px;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        opacity: 0.4;
      }

      &_type {
        width: 25%;
        height: 30px;
        line-height: 30px;
        font-size: 9px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
      }

      &_num {
        width: 25%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 8px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }

  .container2 {
    width: 450px;
    height: 300px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_3_3.png");
    flex-direction: column;

    &_emphasis {
      width: 260px;
      height: 520px;

      &_firm {
        width: 100%;
        height: 210px;
        margin-top: 10px;
        position: relative;

        &_fontColor {
          font-size: 14px;
          font-family: Noto Sans SC-Medium, Noto Sans SC;
          font-weight: 500;
          color: #00e6ff;
          margin-bottom: 5px;
        }

        &_imgBox {
          width: 100%;
          height: 154px;
          margin-top: 8px;
          background-size: 100% 100%;
          background-image: url("@/assets/bg_pt.png");
        }
      }
    }

    &-place {
      margin-left: 60px;
      width: 200px !important;
      height: 28px;
    }
  }
}

.trackContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  .track {
    width: 269px;
    height: 41px;
    margin-right: 5px;
    display: flex;
    margin-top: 5px;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_track.png");

    .icon {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-image: url("@/assets/icon_track.png");
    }

    .name {
      margin-left: 7px;
      height: 14px;
      font-size: 10px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #1cfdff;
      line-height: 14px;
    }

    .type {
      //white-space: nowrap;
      margin-top: 5px;
      height: 8px;
      font-size: 8px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 8px;
      overflow: hidden; /* 控制超出部分隐藏 */
      word-break: break-all; /* 超出部分强制换行 */
    }
  }
}

.intentionStyle {
  width: 300px;
  height: 200px;
}

.intentionContainerPadding {
  padding: 10px 16px 0px 15px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k * $pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8 * 2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k * $pixel/$height;
  }
  .marginL21 {
    margin-left: calHeight_2k(6px);
  }

  .marginL13 {
    margin-left: calHeight_2k(6px);
  }

  .rightView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);
    position: relative;
    z-index: 3;

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      height: calHeight_2k(200px);

      &_barBox {
        height: calHeight_2k(155px);
      }

      &_table {
        height: calHeight_2k(154px);
        margin-top: calHeight_2k(15px);

        &_header {
          height: calHeight_2k(26px);
          line-height: calHeight_2k(26px);
        }

        &_header2 {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
          margin-top: calHeight_2k(2px);
          margin-bottom: calHeight_2k(2px);
        }

        &_subject {
          height: calHeight_2k(180px);

          &_line {
            margin-top: calHeight_2k(5px);
            height: calHeight_2k(23px);
            //margin-top: calHeight_2k(8px);
            //margin-bottom: calHeight_2k(8px);
            line-height: calHeight_2k(23px);
          }
        }
      }

      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &-camera {
        &_firm {
          height: calHeight_2k(180px);
          margin-top: calHeight_2k(10px);

          &_imgBox {
            height: calHeight_2k(100px);
            margin-top: calHeight_2k(8px);
          }
        }
      }

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(20px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }
      }

      &_title4 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(15px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }
      }

      &_intention {
        height: calHeight_2k(161px);

        &_line {
          height: calHeight_2k(1px);
        }

        &_bg {
          height: calHeight_2k(161px);
        }

        &_title {
          height: calHeight_2k(18px);
          line-height: calHeight_2k(18px);
        }

        &_type {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }

        &_num {
          height: calHeight_2k(30px);
          line-height: calHeight_2k(30px);
        }
      }
    }

    .container2 {
      height: calHeight_2k(300px);

      &_emphasis {
        height: calHeight_2k(520px);

        &_firm {
          height: calHeight_2k(210px);
          margin-top: calHeight_2k(10px);

          &_fontColor {
            margin-bottom: calHeight_2k(5px);
          }

          &_imgBox {
            height: calHeight_2k(154px);
            margin-top: calHeight_2k(8px);
          }
        }
      }
    }
  }

  .trackContainer {
    .track {
      height: calHeight_2k(41px);
      margin-top: calHeight_2k(5px);

      .icon {
        height: calHeight_2k(14px);
      }

      .name {
        height: calHeight_2k(14px);
        line-height: calHeight_2k(14px);
      }

      .type {
        margin-top: calHeight_2k(5px);
        height: calHeight_2k(8px);
        line-height: calHeight_2k(8px);
      }
    }
  }

  .intentionStyle {
    height: calHeight_2k(200px);
  }

  .intentionContainerPadding {
    padding-top: calHeight_2k(10px);
    padding-bottom: calHeight_2k(0px);
  }
}
</style>
